<template>
	<view class="">
		<uni-popup ref="popup" type="center">
			<view class="p-box">
				<image :src="img" mode="aspectFit" class="p-img"></image>
				<view class="p-bottom">
					<button size="mini" @click="cancal">分享给朋友</button>
					<button type="primary" size="mini" @click="save">保存到相册</button>
				</view>
			</view>
		</uni-popup>
		<!-- <uqrcode :size="100" hide ref="uqrcode" canvas-id="qrcodeid" :value="str" :options="{ margin: 5 }"></uqrcode> -->
		<canvas id="canvasid" canvas-id="canvasid" class="uqrcode-hide" style="width: 320px;height: 600px;background-color: #fff;"></canvas>
		<canvas id="canvasQr" canvas-id="canvasQr" class="uqrcode-hide" style="width: 500px;height: 500px;"></canvas>
	</view>
</template>

<script>
	const db = uniCloud.database();
	/* 引入uQRCode核心js */
	import UQRCode from '@/common/uqrcode/uqrcode.js';
	
	import {
		useUserStore
	} from "@/pinia/user.js"
	import {
		mapState
	} from "pinia"
	export default {
		name: "wolf-shareinge",
		data() {
			return {
				// img:'',
				book_bg_img:{},
				qrUrl: '',
				ctx: '',
				img: '',
				avatar: ''
			}
		},
		computed: {
			...mapState(useUserStore, ['sysSetting', "userInfo"]),
			// str() {
			// 	return `http://hunlianqr.hnyiyiwang.cn?inviteCode=${this.userInfo.my_invite_code}`
			// }
		},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			async share() {
				console.log("share");
				
				if(!this.book_bg_img.bg_img){
					let res = await db.collection('wolf-share').where(`is_book==1`).get()
					this.book_bg_img = Object.assign({},res.result.data[0])
					console.log('res===>',res);
				}
				this.shareClick(this.book_bg_img)
				
			},
			// async getQRcode() {
			// 	return await new Promise((resolve, reject) => {
			// 		this.$refs.uqrcode.toTempFilePath({
			// 			success: res => {
			// 				console.log(res);
			// 				resolve(res.tempFilePath);
			// 			}
			// 		});
			// 	});
			// },
			async shareClick(data) {
				uni.showLoading()
				this.ctx = uni.createCanvasContext('canvasid', this)
				let _that = this
				// let qrData = await this.getQRcode() //获取二维码图片
				let qrData
				if (!this.qrUrl) {
				let str = `http://hunlianqr.hnyiyiwang.cn?inviteCode=${this.userInfo.my_invite_code}`
				    qrData = this.qrUrl = await this.draw(str)
				} else {
					qrData = this.qrUrl
				}
				console.log("qrData", qrData)
				let avatar
				if (!this.avatar && this.userInfo.avatar_file?.url) {
					avatar = this.avatar = await this.downImage(this.userInfo.avatar_file.url)
				} else {
					avatar = this.avatar
				}
				let bgImg = await this.downImage(data.bg_img)
				// console.log("==========>>>>>>>>",bgImg,qrData);
				this.ctx.drawImage(bgImg, 0, 0, 320, 600)
				this.ctx.drawImage(qrData, data.qr_info.x, data.qr_info.y, 100, 100)
				if (data.is_avatar) {
					this.ctx.drawImage(avatar, data.avatar.x, data.avatar.y, 50, 50)
				}
				if (data.is_invite) {
					this.ctx.setFontSize(14)
					this.ctx.fillText(this.userInfo.my_invite_code, data.invite.x, data.invite.y, 60)
				}
				if (data.is_nick) {
					let nStr = "匿名用户"
					if (this.userInfo.nickname) {
						nStr = this.userInfo.nickname
					}
					this.ctx.setFontSize(16)
					this.ctx.fillText(nStr, data.nickName.x, data.nickName.y, 100)
				}
				this.ctx.draw()
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: 320,
					height: 600,
					fileType: "png",
					canvasId: 'canvasid',
					success: function(res) {
						console.log("res==>",res);
						_that.img = res.tempFilePath
						_that.open()
					},
					fail:(e)=>{
						console.log("fail",e);
					},
					complete: () => {
						uni.hideLoading()
					}
				},this)
			},
			async downImage(url) {
				return await new Promise((resolve, reject) => {
					uni.downloadFile({
						url,
						success: async (res) => {
							if (res.statusCode === 200) {
								resolve(res.tempFilePath)
								// _that.drawQR(res.tempFilePath, qrData, data)
							}
						}
					});
				})
			},
			cancal() {
				console.log("img", this.img)
				const _that = this
				wx.showShareImageMenu({
					path: _that.img
				})
			},
			save() {
				const _that = this
				uni.saveImageToPhotosAlbum({
					filePath: this.img,
					success: res1 => {
						uni.showToast({
							title: "保存成功",
							icon: "none"
						})
						_that.$refs.popupShare.close()
						console.log("res1", res1)
					},
					fail: err1 => {
						console.log("err1", err1)
					},
					complete: () => {
						// _that.$refs.popupShare.close()
						console.log("complete")
					}
				});
			},
			async draw(data) {
				const _that = this
				var qr = new UQRCode();
				// 设置二维码内容
				qr.data = data;
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = 500;
				qr.margin = 10
				qr.backgroundColor = 'rgba(255,255,255,0)'
				// 调用制作二维码方法
				qr.make();
				const canvasContext = uni.createCanvasContext("canvasQr", this);
				canvasContext.clearRect(0, 0, 500, 500)
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();
				return await new Promise((resolve, reject) => {
					setTimeout(()=>{
						uni.canvasToTempFilePath({
								canvasId: "canvasQr",
								fileType: "png",
								x: 0,
								y: 0,
								width: 500,
								height: 500,
								success: res => {
									_that.qrUrl = res.tempFilePath
									resolve(res.tempFilePath);
									_that.qrUrl = res.tempFilePath
								},
								fail: err => {
									console.log(err);
								},
								complete: () => {
									console.log("complete");
								}
							},
							_that
						);
					},500)

				});
			}
		}
	}
</script>

<style scoped lang="scss">
	view {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	.uqrcode-hide {
		position: fixed;
		left: 7500rpx;
	}
	.p-box{
		// flex-direction: row;
	}
	.p-img {
		min-height: 400px;
	}
	.p-bottom {
		flex-direction: row;
		justify-content: space-around;
	}
</style>